<template>
  <div class="ref1">
    <h1 ref="title1" id="title1">尚硅谷</h1>
    <h2 ref="title2">前端</h2>
    <h3 ref="title3">Vue</h3>
    <input type="text" ref="inpt" /> <br /><br />
    <button @click="showLog">点我打印内容</button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
// 数据
let title1 = ref();
let title2 = ref();
let title3 = ref();
// 方法
function showLog() {
  // 通过id获取元素
  const t1 = document.getElementById("title1");
  // 打印内容
  console.log((t1 as HTMLElement).innerText);//尚硅谷
  console.log((<HTMLElement>t1).innerText);//尚硅谷
  console.log(t1?.innerText);//尚硅谷
  // 通过ref获取元素，获取到的是dom节点
  console.log(title1.value);//<h1 data-v-3c2f423f="" id="title1">尚硅谷</h1>
  console.log(title2.value);//<h2 data-v-3c2f423f="">前端</h2>
  console.log(title3.value);//<h3 data-v-3c2f423f="">Vue</h3>
}
</script>
<style scoped>
.ref1 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>
